<template>
  <view class="y-menu">
    <text class="title" v-if="title">{{ title }}</text>

    <u-grid :col="4" :border="false">
      <u-grid-item
        v-for="(item, index) in menu"
        :key="index"
        @click="onClickMenuItem(item)"
        :custom-style="customStyle"
      >
        <u-icon
          :name="item.name"
          :custom-prefix="customPrefix"
          size="72"
          :color="item.color"
        ></u-icon>

        <u-gap height="10"></u-gap>

        <view class="grid-text">{{ item.title }}</view>
      </u-grid-item>
    </u-grid>
  </view>
</template>

<script>
/**
 * 菜单
 * @description 宫格形式的菜单组件
 * @property {String} custom-prefix 菜单图标的自定义前缀
 * @property {Array} menu 菜单数据，数据是对象数组的形式
 *                        对象结构为：{ name: '<图标名称>', color: '<图标颜色>', title: '<菜单项标题>' }
 *                        除了以上对象中的三个属性，其余属性可以根据自身需求，自行添加
 * @property {String} title 菜单标题，菜单左上角显示的标题，不填就不显示
 * @event {Function} click-menu-item 点击菜单项，触发的事件
 *                   回调参数：menuItem，传递对应的菜单项数据
 *                   菜单项数据，参考以上菜单数据的介绍
 */
export default {
  name: 'y-menu',

  props: {
    // 菜单图标的自定义前缀
    customPrefix: {
      type: String,
      default: '',
    },

    // 菜单数据
    menu: {
      type: Array,
      default() {
        return [];
      },
    },

    // 菜单标题
    title: {
      type: String,
      default: '',
    },
  },

  data() {
    return {
      // 自定义菜单项的样式
      customStyle: {
        padding: '0 0 30rpx',
      },
    };
  },

  methods: {
    /**
     * 点击菜单项
     */
    onClickMenuItem(menuItem) {
      this.$emit('click-menu-item', menuItem);
    },
  },
};
</script>

<style lang="scss" scoped>
.y-menu {
  background-color: #ffffff;
  border-radius: $y-border-radius;
  margin: $y-spacing-col-base $y-spacing-row-base;
  padding: $y-spacing-col-lg 0 0;
}

.u-grid-item {
  border-radius: $y-border-radius;
}

.grid-text {
  font-size: $y-font-size-sm;
}

.title {
  display: block;
  font-size: $y-font-size-base;
  font-weight: bold;
  padding: 0 0 $y-spacing-col-lg $y-spacing-col-lg;
}
</style>
